<template>
	<view class="main-content">
		<u-form :model="form" id="form-container">
			<u-form-item label="员工工号" label-width=150>
				<u-input v-model="form.jobNumber" placeholder="请输入员工工号" border clearable></u-input>
			</u-form-item>
			<u-form-item label="机台号" label-width=150>
				<u-input v-model="form.machineId" placeholder="请输入机台号" border clearable></u-input>
			</u-form-item>
			<u-form-item class="checkBtn">
				<u-button type="success" size="medium" @click="getBindList">查询</u-button>
			</u-form-item>
		</u-form>
		<!-- 员工已经绑定的工位列表 -->
			<view class="list-item-wrapper" v-bind:id="index" v-for="(item,index) in bindList" :key="index">
				<view class="list-item">
					<view>机台号</view>
					<view>{{item.machineId}}</view>
				</view>
				<view class="list-item">
					<view>工位所需的部门</view>
					<view>{{item.department==null?'无':item.department}}</view>
				</view>
				<view class="list-item">
					<view>所需职级</view>
					<view>{{item.jobClass==null?'无':item.jobClass}}</view>
				</view>
				<view class="list-item" v-if="item.jobNumber">
					<view>员工工号</view>
					<view>{{item.jobNumber}}</view>
					<u-button size="mini" type="warning" @click="secondConfirm(item.machineId,item.jobNumber,index)">解绑</u-button>
				</view>
				<view class="list-item" v-if="item.isMore && item.jobNumber2">
					<view>员工工号</view>
					<view>{{item.jobNumber2}}</view>
					<u-button size="mini" type="warning" @click="secondConfirm(item.machineId,item.jobNumber2,index)">解绑</u-button>
				</view>
				<view class="list-item" v-if="item.isMore && item.jobNumber3">
					<view>员工工号</view>
					<view>{{item.jobNumber3}}</view>
					<u-button size="mini" type="warning" @click="secondConfirm(item.machineId,item.jobNumber3,index)">解绑</u-button>
				</view>
				<view class="list-item">
					<view>工段编号</view>
					<view>{{item.sectionNo}}</view>
				</view>
			</view>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-modal v-model="show" :content="content" :async-close="true" :show-cancel-button="cancleBtn" @cancel="cancel" @confirm="confirm"></u-modal>
	</view>
</template>

<script>
import { UserUnbindList,SectionManagerNumberUnbind } from '../../../utils/index.js'
	export default {
		data() {
			return {
				bindList: [],		//员工已经绑定工位的列表
				content: '是否确定解除该工位的绑定',		//弹出框的提示信息
				show: false,			//弹出框是否显示的条件
				cancleBtn: true,		//弹出框的“取消”按钮显示条件
				unBindInfo: {
					index: '',
					machineId: '',
					jobNumber: ''
				},
				form: {
					jobNumber:'',
					machineId: ''
				}
			}
		},
		methods: {
			// 弹出框“确认”解绑的函数
			confirm() {
				this.unbindUser(this.unBindInfo)
				this.show = false
			},
			// 弹出框“取消”解绑的函数
			cancel() {
				this.show = false
			},
			// 解绑按钮绑定的函数
			// 点击“解绑”，调用函数打开的是对话框让用户确认
			//将对应的解绑信息复制给unBindInfo对象
			secondConfirm(machineId,jobNumber,index) {
				this.show = true
				this.unBindInfo = {machineId,jobNumber,index}
			},
			// 解绑员工机台
			async unbindUser(item) {
				const query = {}
				query.machineId = item.machineId
				query.jobNumber = item.jobNumber
				const {data} = await SectionManagerNumberUnbind(query)
				if(data.code == '1') {
					if(item.jobNumber == this.bindList[item.index].jobNumber){
						this.bindList[item.index].jobNumber = ''
					} else if(item.jobNumber == this.bindList[item.index].jobNumber2){
						this.bindList[item.index].jobNumber2 = ''
					} else if(item.jobNumber == this.bindList[item.index].jobNumber3){
						this.bindList[item.index].jobNumber3 = ''
					}//解绑成功后将数据从DOM中去除
					this.$refs.uTips.show({
						title: '解绑成功',
						type: 'success',
						duration: '2000'
					})
				} else {
					this.$refs.uTips.show({
						title: '解绑失败',
						type: 'warning',
						duration: '2000'
					})
				}
			},
			// 获得已经绑定的工位信息
			async getBindList() {
				let query = {}
				if(this.form.machineId) {
					query.machineId = this.form.machineId
				}
				if(this.form.jobNumber){
					query.jobNumber = this.form.jobNumber
				}
				const {data} = await UserUnbindList(query)
				const errmsg = data.msg
				if(data.code == '1') {
					this.bindList = data.data
				} else {
					this.$refs.uTips.show({
						title: errmsg,
						type: 'warning',
						duration: '2000'
					})
				}
			}
		},
		// 在进入页面时就从后台请求获取绑定工位的信息
		onLoad() {
			this.getBindList()
		},
		// 下拉获取绑定信息
		onPullDownRefresh() {
			this.getBindList()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			},3000)
		},
	}
</script>

<style lang="scss" scoped>
.page-font {
	font-size: 40rpx;
}
.list-item-wrapper {
	margin: 20rpx;
	padding: 20rpx;
	border-radius: 10rpx;
	background-color: #FFEFD5;
}
.list-item {
	display: flex;
	justify-content: space-between;
	font-size: 16px;
	margin: 10rpx 10rpx;
}
.list-item button{
	// height: 40rpx;
}
.main-content {
		width: 100%;
		margin-top: 20rpx;
}
.scroller {
	width: 100%;
	overflow: hidden;
}
.main-content ::v-deep .u-form {
	margin: 0rpx 10rpx;
	padding: 0rpx 10rpx;
}
// 按钮样式
.checkBtn {
	display: flex;
	justify-content: center;
	margin-top: 10rpx;
}
</style>
